<template>
    <div id="or">
        <div class="main">
            <h3>
                <i class="el-icon-arrow-left  imgicon" @click="back"></i>
                我的订单
            </h3>
            <ul>
                <li v-for="(el, i) in list" :key="i" :class="{ active: i == num }" @click="change(i)">{{ el }}</li>
            </ul>
        </div>
        <div v-if="listData.length == 0">
            <h1>空空如也</h1>
        </div>

        <ul class="list22" v-else>
            <li v-for="(el, i) in listData" :key="i">
                <p class="fb" @click="toorderinfo(el.id)">订单编号 :{{ el.orderCode }} <span>
                        <img src="../../../assets/img/mine-img/smallright.png"></span></p>
                <div class="main1">
                    <div class="left">
                        <p>服务项目：{{ el.serviceItem }}</p>
                        <p>服务门店：{{ el.businessName }} <img src="../../../assets/img/wash-car-img/plane.png" @click="toNavi">
                        </p>
                        <p>下单时间：{{ el.createdDate | timeFormate }}</p>
                    </div>
                    <div :class="{ right, blue: el.orderStatus == 0 || el.orderStatus == 1 || el.orderStatus == 2 }">{{
                        el.orderStatus | f1 }}
                    </div>


                </div>
                <p>
                    实付: <span>200</span>元
                    <button class="btn1" @click="evaluate" v-if="el.orderStatus == 2">立即评价</button>
                    <button class="btn1" v-if="el.orderStatus == 0" @click="cancel">取消订单</button>
                    <button class="btn1" v-if="el.orderStatus == 1" @click="refund">申请退款</button>
                    <button class="btn2" v-if="el.orderStatus == 3">重新下单</button>
                    <button class="btn2" v-if="el.orderStatus == 0">立即支付</button>
                    <button class="btn2" v-if="el.orderStatus == 4 || el.orderStatus == 2">再来一单</button>
                    <button class="btn2" v-if="el.orderStatus == 1" @click="showPopup(el.verification)">扫码核算</button>
                    <van-popup v-model="show" v-if="show">
                        <div class="up tc">
                            <qrCode :code="qrcode2"  />
                        </div>
                    </van-popup>
                </p>
            </li>
        </ul>
    </div>
</template>
<script>
import { orderList } from '../../../api/myself';
import qrCode from '../../../components/qrCode.vue';
export default {
    components: { qrCode },
    data() {
        return {
            show: false,
            list: ["全部", "待支付", "待使用", "待评价"],
            num: 0,
            right: 'right',
            blue: 'blue',
            listData: [],
            listData1: [],
            qrcode2: null,
        }
    },
    mounted() {
        orderList({ userId: 1 }).then(r => {

            this.listData1 = r.data
            this.listData = r.data
            console.log(this.listData);
            this.filterListData()
        })
        this.num = this.$route.query.num;
    },
    methods: {
        showPopup(code) {
            this.show = true;
            this.qrcode2 = code
        },
        back() {
            this.$router.push('/mine')
            
        },
        toorderinfo(id) {
            this.$router.push(
                {
                    path: "/orderinfo2",
                    query: {
                        id: id
                    }
                }
            )
        },
        evaluate() {
            this.$router.push("/evaluate");
        },
        change(index) {
            this.num = index
            //过滤数据 
            this.filterListData()
        },
        //退款
        refund() {
            this.$dialog.confirm({
                message: '退款后将返回到支付账户请确认是否退款',
            })
                .then(() => {
                    // on confirm
                    console.log("确认退款");
                })
                .catch(() => {
                    // on cancel
                    console.log('取消退款');
                })
        },
        //取消订单
        cancel() {
            this.$dialog.confirm({
                message: '确认要取消订单吗',
            })
                .then(() => {
                    // on confirm
                    console.log("确认取消订单");
                })
                .catch(() => {
                    // on cancel
                    console.log('取消取消订单');
                })
        },

        toNavi() {
            this.$router.push({ path: '/using/navigation' })
        },




        filterListData() {
            if (this.num == 1) {
                this.listData = this.listData1.filter(el => el.orderStatus == 0 )
            }
            if (this.num == 2) {
                this.listData = this.listData1.filter(el => el.orderStatus == 1 )
            }
            if (this.num == 3) {
                this.listData = this.listData1.filter(el => el.orderStatus == 2 )
            }
            if (this.num == 0) {
                this.listData = this.listData1
            }
        }
    },

    filters: {
        f1(num) {
            switch (num) {
                case 3: return "已取消";
                case 0: return '待支付';
                case 1: return '待使用';
                case 2: return '待评价';
                // case 4 : return '已完成';
                case 4: return '已退款';
            }
        },
        timeFormate(val){//修改时间格式
            let t= val.substr(0,10);
            let d = new Date(val);
            let res = t+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            console.log(res);
            return res;
        }
    },
}
</script>
<style  scoped>
>>>.van-overlay {
    background-color: rgba(0, 0, 0, .3);
}

.up {
    width: 190px;
    height: 190px;
}

h1 {
    width: 704rem;
    height: 500rem;
    border-radius: 20rem;
    box-sizing: border-box;
    padding-top: 100rem;
    font-size: 50rem;
    color: aquamarine;
    margin: -240rem auto;
    text-align: center;
    background-color: rgb(247, 247, 247);
}

#or {
    background-color: rgb(247, 247, 247);
}

.main {
    height: 430rem;
    background-color: rgb(46, 128, 249);
    padding-top: 70rem;
}

.blue {
    color: rgb(0, 60, 255);
}

.imgicon {
    position: absolute;
    left: 30rem;
    top: 80rem;
}

h3 {
    text-align: center;
    font-size: 36rem;
    font-weight: normal;
    color: white;
    margin-bottom: 55rem;
}

.main ul {
    width: 750rem;
    font-size: 30rem;
    display: flex;
    justify-content: space-around;
}

.main ul li {
    width: 102rem;
    text-align: center;
    padding-bottom: 5rem;
    color: white;
}

.active {
    color: white;
    border-bottom: 5rem solid white;
}

.list22 {
    width: 704rem;
    margin: -240rem auto;

}

.list22 li {
    padding: 5rem;
    font-size: 26rem;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20rem;
    margin-bottom: 20rem;
    padding: 0 30rem;
    padding-bottom: 50rem;
}

.list22 li>p:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rem;
    border-bottom: 3rem solid #ccc;

}

.list22 li>p:nth-child(1) img {
    width: 20rem;
    height: 30rem;
}

.list22 li>p:last-child {
    border-top: 1px solid rgba(99, 99, 99, .2);
    padding-top: 35rem;
    position: relative;
}

.main1 {
    display: flex;
    justify-content: space-between;
}

.main1 .left p {
    font-size: 24rem;
    color: #2F2310;
    margin: 10rem auto;
}

.main1 .left img {
    width: 30rem;
    margin-left: 20rem;
    vertical-align: middle;
}

.right {
    width: 120rem;
    height: 120rem;
    line-height: 120rem;
    text-align: center;
}

button {
    width: 140rem;
    height: 50rem;
    border: 0;
    font-size: 20rem;
    border-radius: 10rem;
    position: absolute;
}

.btn1 {
    background-color: rgb(191, 191, 191);
    right: 170rem;
}

.btn2 {
    color: white;
    background-color: rgb(30, 114, 240);
    right: 5rem;
}
</style>
